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Anexo A: ACTIVIDADES 
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Implementa base de datos que gestionen información para 
satisfacer requerimientos de negocios, aplicando técnicas de 
diseño y herramientas actuales considerando metodologías 
actuales, estándares de la industria y buenas prácticas para su 


implementación. 
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TEMA 1: JavaScript como 


lenguaje del lado frontend 


JavaScript es un lenguaje de programaciõn o de secuencias de comandos 
gue te permite implementar funciones complejas en päginas web, cada vez gue una 
página web hace algo más que sentarse allí y mostrar información estática para que 
la veas, muestra oportunas actualizaciones de contenido, mapas interactivos, 
animación de Gráficos 2D/3D, desplazamiento de máquinas reproductoras de vídeo, 
etc., puedes apostar que probablemente JavaScript está involucrado. Es la tercera 
capa del pastel de las tecnologías web estándar, dos de las cuales (HTML y CSS) 


hemos cubierto con mucho más detalle en otras partes del Área de aprendizaje. 


EVER ls 
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HTML 








Es el lenguaje de marcado gue usamos para estructurar y dar significado a 
nuestro contenido web, por ejemplo, definiendo pärrafos, encabezados y tablas de 
datos, o insertando imägenes y videos en la pägina. 


CSS 





Es un lenguaje de reglas de estilo que usamos para aplicar estilo a nuestro 
contenido HTML, por ejemplo, establecer colores de fondo y tipos de letra, y 


distribuir nuestro contenido en múltiples columnas. 


JavaScript 


Es un lenguaje de secuencias de comandos que te permite crear contenido 
de actualización dinámica, controlar multimedia, animar imágenes y prácticamente 
todo lo demás. (Está bien, no todo, pero es sorprendente lo que puedes lograr con 


unas pocas líneas de código JavaScript). 


Las tres capas se superponen muy bien. Tomemos una etiqueta de texto 
simple como ejemplo. Podemos marcarla usando HTML para darle estructura y 


propósito: 


Jugador 1: Jaime 





Luego, podemos agregar algo de CSS a la mezcla para que se vea bien: 


font-family: 
letter-spacing: 1px; 
text-transform: 


text-align: 3 
border: 2px ] rgba(0,0,208,8.6); 
background: rgba(0,0,200,0.3); 
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color: rgba(0,0,200,0.6); 

box-shadow: 1px 1px 2px rgba(0,0,200,0.4); 
border-radius: 10px; 

padding: 3px 10px; 


display: 
cursor: 





JUGADOR 1: JAIME 


Y finalmente, podemos agregar algo de JavaScript para implementar un 


comportamiento dinámico: 


= document.querySelector('p'); 
.addEventListener( , updateName); 
updateName() { 


name = prompt('I l mbre'); 
.textContent = ] 1 + name; 





JUGADOR 1: DALMA 


EI nücleo del lenguaje JavaScript de lado del cliente consta de algunas 


caracteristicas de programaciõn comunes gue te permiten hacer cosas como: 


Almacenar valores ütiles dentro de variables. En el ejemplo anterior, 
por ejemplo, pedimos gue ingreses un nuevo nombre y luego 
almacenamos ese nombre en una variable llamada name. 

Operaciones sobre fragmentos de texto (conocidas como "cadenas" 
(strings) en programación). En el ejemplo anterior, tomamos la 
cadena "Jugardor1:" y la unimos a la variable name para crear la etiqueta 


de texto completa, p. ej. 'Jugador1: Jaime". 
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e Y ejecuta código en respuesta a ciertos eventos que ocurren en una 
página web. Usamos un evento click en nuestro ejemplo anterior para 
detectar cuándo se hace clic en el botón y luego ejecutar el código que 


actualiza la etiqueta de texto. 


Sin embargo, lo que aún es más emocionante es la funcionalidad construida 
sobre el lenguaje JavaScript de lado del cliente. Las denominadas interfaces de 
programación de aplicaciones (API) te proporcionan superpoderes adicionales 


para utilizar en tu código JavaScript. 


Las API son conjuntos de bloques de construcción de código listos para usar 
que permiten a un desarrollador implementar programas que de otro modo serían 
difíciles o imposibles de implementar. Hacen lo mismo para la programación que los 
kits de muebles prefabricados para la construcción de viviendas — es mucho más 
fácil tomar paneles precortados y atornillarlos para hacer una estantería que 
elaborar el diseño tú mismo, que ir y encontrar la madera correcta, cortar todos los 
paneles del tamaño y la forma correctos, buscar los tornillos del tamaño correcto 


y luego júntalos para hacer una estantería. 


Generalmente se dividen en dos categorías. 
APIs del navegador 


Están integradas en tu navegador web y pueden exponer datos del entorno 


informático circundante o realizar tareas complejas y útiles. Por ejemplo: 


La API del DOM (Document Object Model) te permite manipular HTML y CSS, 
crear, eliminar y cambiar el HTML, aplicar dinámicamente nuevos estilos a tu 


página, etc. Cada vez que ves aparecer una ventana emergente en una página, o 
se muestra algún nuevo contenido (como vimos anteriormente en nuestra sencilla 


demostración), por ejemplo, ese es el DOM en acción. 
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La API de Geolocalización recupera información geográfica. Asi es 


como Google Maps puede encontrar tu ubicación y trazarla en un mapa. 





Las APIs Canvas y wWebGL te permiten crear gráficos animados en 2D y 3D. Las 
personas están haciendo cosas increíbles con estas tecnologías web — 
consulta Experimentos de Chrome y webglsamples. 


APls de audio y video como HTMLMediaElement y webRTc te permiten hacer 





cosas realmente interesantes con multimedia, como reproducir audio y video 
directamente en una página web, o tomar video de tu cámara web y mostrarlo en la 
computadora de otra persona (prueba nuestra sencilla demostración 
instantánea para hacerte una idea). 


Las APIs de terceros 








No están integradas en el navegador de forma predeterminada y, por lo 
general, debes obtener su código e información de algún lugar de la Web. Por 
ejemplo: 


La API de Twitter te permite hacer cosas como mostrar tus últimos tweets 


en tu sitio web. 


La API de Google Maps y la API de OpenStreetMap te permiten insertar 
mapas personalizados en tu sitio web y otras funciones similares. 


Código interpretado versus compilado 








Es posible que escuches los términos interpretados y compilados en el 
contexto de la programación. En los lenguajes interpretados, el código se ejecuta 
de arriba a abajo y el resultado de ejecutar el código se devuelve inmediatamente. 


No tienes que transformar el código en una forma diferente antes de que el 
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navegador lo ejecute. El código se recibe en su forma de texto amigable para el 


programador y se procesa directamente desde allí. 


Los lenguajes compilados, por otro lado, se transforman (compilan) a código 
máquina antes de que sean ejecutados por la computadora. Por ejemplo, C/C++ se 
compila a código máquina que luego ejecuta la computadora. El programa se 
ejecuta desde un formato binario, que se generó a partir del código fuente del 


programa original. 


JavaScript es un lenguaje de programación interpretado ligero. El navegador 
web recibe el código JavaScript en su forma de texto original y ejecuta el script a 
partir de ahí. Desde un punto de vista técnico, la mayoría de los intérpretes de 
JavaScript modernos utilizan una técnica llamada compilación en tiempo 
real para mejorar el rendimiento; el código fuente de JavaScript se compila en un 
formato binario más rápido mientras se usa el script, de modo que se pueda ejecutar 
lo más rápido posible. Sin embargo, JavaScript todavía se considera un lenguaje 
interpretado, ya que la compilación se maneja en el entorno de ejecución, en lugar 


de antes. 


¿Cómo agregas JavaScript a tu 


página? 








JavaScript se aplica a tu página HTML de manera similar a CSS. Mientras que 
CSS usa elementos <link> para aplicar hojas de estilo externas y 
elementos <style> para aplicar hojas de estilo internas a HTML, JavaScript solo 
necesita un amigo en el mundo de HTML: el elemento ([htmlelement("script"))). 


Aprendamos cómo funciona esto. 
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JavaScript interno 


v 


Se invita a ver el siguiente código fuente, donde se aprecia, la ejecución 


Código fuente 


dentro de la etiqueta body. 


Jugador 1: Jaime 


= document.guerySelector('p'); 


.addEventListener( , updateName); 


updateName() { 
name = prompt( SS 
«textContent = A + name; 





JavaScript Externo 


En este caso, se cuenta con un archivo denominado archivo01.js, la cual 


contendrá el código javascript y será llamada de la siguiente manera: 


v 


Código fuente 
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TEMA 2: Conceptos bäsicos 


de los objetos JavaScript 


En este apartado, veremos fundamentos de sintaxis de los objetos de 
JavaScript y revisaremos algunas caracteristicas de JavaScript gue ya hemos 
analizado anteriormente en el curso, reiterando el hecho de gue muchas de las 


funciones con las gue ya has tratado de hecho son objetos. 
Conceptos sobre objetos 


Un objeto es una colección de datos relacionados y/o funcionalidad (que 
generalmente consta de algunas variables y funciones, que se denominan 
propiedades y métodos cuando están dentro de objetos). Vamos a trabajar a través 


de un ejemplo para mostrarte cómo son. 


Para empezar, haz una copia local de nuestro archivo basejs.html, esto 
contiene muy poco: un elemento <script> para que escribas tu código fuente en él. 
Lo usaremos como base para explorar la sintaxis básica de los objetos. 


Al igual que con muchas cosas en JavaScript, la creación de un objeto a 
menudo comienza con la definición de iniciación de una variable. Intenta ingresar lo 
siguiente debajo del código JavaScript que ya está en tu archivo, luego guarda y 


actualiza: 


¡Felicidades!, acabas de crear tu primer objeto. ¡Trabajo realizado! 
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Pero este es un objeto vacio, por lo gue realmente no podemos hacer mucho 


con él. 


Actualicemos nuestro objeto para que se vea así: 


persona = | 

nombre: ['Bob', 'Smith'], 

edad: 32, 

genero: 'masculino', 

intereses: ['música', 'esquí'], 
bio: O < 


alert( .nombre[0] + .nombre[1] + 


' tiene ' + «edad + ' años. Le gusta ' + 


.intereses[0] + ' y ' + .intereses[1] + '.'); 
), 
saludo: O A 
alert('Hola, Soy '+ .nombre[0] + '. '); 





Después de guardar y actualizar, intenta ingresar algunos de los siguientes 


en tu entrada de texto: 


alert(persona.edad); 


persona.bio(); 
persona.saludo(); 





te (para su revisión) 





¡Ahora tienes algunos datos y funcionalidades dentro de tu objeto, y ahora 


puedes acceder a ellos con una sintaxis simple y agradable! 
Notación de punto 


Arriba, accediste a las propiedades y métodos del objeto usando notación de 


punto (dot notation). El nombre del objeto (persona) actúa como el espacio de 
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nombre (namespace); al cual se debe ingresar primero para acceder a cualquier 
elemento encapsulado dentro del objeto. A continuación, escribe un punto y luego 
el elemento al que deseas acceder: puede ser el nombre de una simple propiedad, 
un elemento de una propiedad de arreglo o una llamada a uno de los métodos del 
objeto, por ejemplo: 


persona.bio(); 
persona.saludo(); 


Notacion de corchetes 


Hay otra manera de acceder a las propiedades del objeto, usando la notación 


de corchetes. En lugar de usar estos: 


alert(persona[ 'g IDE 


Esto se ve muy similar a cómo se accede a los elementos en un arreglo, y 
básicamente es lo mismo: en lugar de usar un número de índice para seleccionar un 
elemento, se esta utilizando el nombre asociado con el valor de cada miembro. No 
es de extrañar que los objetos a veces se denominen arreglos asociativos: asocian 
cadenas de texto a valores de la misma manera que las arreglos asocian números a 


valores. 
¿Qué es "this" (este)? 


Es posible que hayas notado algo un poco extraño en nuestros métodos. Mira 


esto, por ejemplo: 


.nombre[0] + e 





Probablemente te estés preguntando qué es "this". La palabra 
clave this se refiere al objeto actual en el que se está escribiendo el código, por lo 


que en este caso this es equivalente a la persona. Entonces, ¿por qué no 
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escribir persona en su lugar? Como veräs en el articulo JavaScript orientado a 
objetos para principiantes cuando comenzaremos a crear constructores, 
etc., this es muy útil: siempre asegurará que se usen los valores correctos cuando 
cambie el contexto de un miembro (por ejemplo, dos diferentes instancias de 
objetos persona) pueden tener diferentes nombres, pero querrás usar su propio 


nombre al decir su saludo). 


Has estado usando objetos todo el 
tiempo 


A medida que has estado repasando estos ejemplos, probablemente hayas 
pensado que la notación de puntos que has usando es muy familiar. ¡Eso es porque 
la has estado usando a lo largo del curso! Cada vez que hemos estado trabajando 
en un ejemplo que utiliza una API de navegador incorporada o un objeto JavaScript, 
hemos estado usando objetos, porque tales características se crean usando 
exactamente el mismo tipo de estructuras de objetos que hemos estado viendo aquí, 


aunque más complejos que nuestros propios ejemplos personalizados. 


Entonces cuando usaste métodos de cadenas de texto como: 


_nyCadena Split (,')3 





Estabas usando un método disponible en una instancia de la clase String. 


Cada vez que creas una cadena en tu código, esa cadena se crea automáticamente 
como una instancia de String, y por lo tanto tiene varios métodos/propiedades 


comunes disponibles en ella. 


Cuando accediste al modelo de objetos del documento (document object 


model) usando líneas como esta: 





var miDiv = document .createElement('div'); 


var miVideo = document .querySelector('video'); 
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Estaba usando métodos disponibles en una instancia de la clase Document. 
Para cada página web cargada, se crea una instancia de Document, llamada document, 
que representa la estructura, el contenido y otras características de la página entera, 
como su URL. De nuevo, esto significa que tiene varios métodos/propiedades 


comunes disponibles en él. 


Lo mismo puede decirse de prácticamente cualquier otro Objeto/API 


incorporado que hayad estado utilizando: Array, Math, etc. 


Ten en cuenta que los Objetos/AP | incorporados no siempre crean instancias 
de objetos automáticamente. Como ejemplo, la API de Notificaciones, que permite 
que los navegadores modernos activen las notificaciones del sistema, requiere que 
crees una instancia de un nuevo objeto para cada notificación que desees disparar. 


Intenta ingresar lo siguiente en tu consola de JavaScript: 





var miNotificacion = new Notification(' jHola!'); 
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